import { createRouter, createWebHashHistory } from "vue-router";
import { defineAsyncComponent } from "vue";

const Login = defineAsyncComponent(() =>
  import("../views/unauthenticated-app")
);
const routes = [
  {
    path: "/login",
    name: "Login",
    component: Login,
  },
  {
    path: "/mock",
    name: "mock",
    component: defineAsyncComponent(() => import("../views/mock")),
  },
  {
    path: "/",
    name: "home",
    component: defineAsyncComponent(() => import("../views/authenticated-app")),
    children: [
      {
        path: "/chat",
        name: "chat",
        component: defineAsyncComponent(() =>
          import("../views/authenticated-app/chat")
        ),
      },
      {
        path: "/chat/chatDetail",
        name: "chatDetail",
        component: defineAsyncComponent(() =>
          import("../views/authenticated-app/chat/chat-detail")
        ),
      },
      {
        path: "/contacts",
        name: "contacts",
        component: defineAsyncComponent(() =>
          import("../views/authenticated-app/contacts")
        ),
      },
      {
        path: "/addcontacts",
        name: "addcontacts",
        component: defineAsyncComponent(() =>
          import("../views/authenticated-app/contacts/add-contacts")
        ),
      },
      {
        path: "/me",
        name: "me",
        component: defineAsyncComponent(() =>
          import("../views/authenticated-app/me")
        ),
      },
    ],
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: (to) => {
      console.log(to);
      return { path: "/login" };
    },
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;
